<!DOCTYPE html>
<html>

	<head>
		<title>良品铺</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<link rel="stylesheet" href="lib/weui.min.css">
		<link rel="stylesheet" href="css/jquery-weui.css">
	</head>
	<style type="text/css">
		/*html,
		body {
			height: 100%;
		}*/
		
		.weui-tab {
			min-width: 320px;
		}
		
		.top {
			height: 50px;
			line-height: 50px;
			text-align: center;
			font-size: 18px;
			color: #9A9A9A;
			font-family: "微软雅黑";
		}
		
		.topb {
			height: 200px;
			box-sizing: border-box;
			background-color: #FF6600;
			padding-top: 40px;
		}
		
		.topb_pa {
			height: 60px;
			line-height: 60px;
			position: relative;
		}
		
		.topb_pa span:first-of-type {
			margin-left: 40px;
			display: inline-block;
			height: 60px;
			width: 60px;
			border-radius: 30px;
		}
		
		.topb_pa span img {
			width: 60px;
		}
		
		.topb_pa span:nth-child(2) {
			left: 120px;
			font-family: "微软雅黑";
			color: white;
			font-size: 18px;
			position: absolute;
			border-top-style: 0px;
			height: 30px;
			line-height: 30px;
		}
		
		.topb_pa span:nth-child(3) {
			position: absolute;
			top: 30px;
			left: 120px;
			font-family: "微软雅黑";
			font-size: 16px;
			border-top-style: 0px;
			height: 30px;
			line-height: 30px;
		}
		
		.topb_pb {
			height: 50px;
			line-height: 50px;
			margin-top: 10px;
		}
		
		.topb_pb span {
			cursor: pointer;
			display: inline-block;
			width: 60px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border-radius: 10px;
			margin-left: 40px;
			background-color: #FFBE00;
			color: red;
			font-size: 14px;
		}
		
		.tab {
			margin-top: 5px;
			height: 60px;
			border-bottom: 5px solid #ADADAD;
		}
		
		.tab .weui-flex__item p {
			height: 30px;
			line-height: 30px;
			text-align: center;
			font-size: 14px;
		}
		
		.tab .weui-flex__item img {
			width: 30px;
		}
		
		.weui-cell .weui-cell__hd img {
			max-width: 40px;
		}
		
		.main {
			/*border: 1px solid;*/
			margin-bottom: 50px;
		}
		
		a {
			color: black;
		}
		
		a:hover {
			color: red;
		}
	</style>

	<body ontouchstart>
		<div class="weui-tab">
			<div class="weui-tab__bd">
				<div class="weui-tab__bd-item weui-tab__bd-item--active">
					<div class="main">
						<div class="top">
							<span>个人中心</span>
						</div>
						<div class="topb">
							<p class="topb_pa"><span><img src="img/icon_brand_alipay.png"/></span><span>156****2935</span><span>普通会员 0积分可用</span></p>
							<p class="topb_pb"><span>签到</span></p>
						</div>
						<div class="tab">
							<div class="weui-flex">
								<div class="weui-flex__item">
									<div class="placeholder">
										<p><img src="img/priv_on_01.png" /></p>
										<p><span>待支付</span></p>
									</div>
								</div>
								<div class="weui-flex__item">
									<div class="placeholder">
										<p><img src="img/priv_on_06.png" /></p>
										<p><span>待发货</span></p>
									</div>
								</div>
								<div class="weui-flex__item">
									<div class="placeholder">
										<p><img src="img/priv_on_03.png" /></p>
										<p><span>已发货</span></p>
									</div>
								</div>
								<div class="weui-flex__item">
									<div class="placeholder">
										<p><img src="img/priv_on_05.png" /></p>
										<p><span>已完成</span></p>
									</div>
								</div>
							</div>
						</div>
						<div calss="main">
							<a class="weui-cell weui-cell_access" href="javascript:;">
								<div class="weui-cell__hd"><img src="img/icon_coupon.png"></div>
								<div class="weui-cell__bd">
									<p>我的订单</p>
								</div>
								<div class="weui-cell__ft"></div>
							</a>
							<a class="weui-cell weui-cell_access" href="javascript:;">
								<div class="weui-cell__hd"><img src="img/icon_concern.png"></div>
								<div class="weui-cell__bd">
									<p>我的关注</p>
								</div>
								<div class="weui-cell__ft"></div>
							</a>
							<a class="weui-cell weui-cell_access" href="javascript:;">
								<div class="weui-cell__hd"><img src="img/icon_goods.png"></div>
								<div class="weui-cell__bd">
									<p>商品列表</p>
								</div>
								<div class="weui-cell__ft"></div>
							</a>
							<a class="weui-cell weui-cell_access" href="javascript:;">
								<div class="weui-cell__hd"><img src="img/icon_logistics.png"></div>
								<div class="weui-cell__bd">
									<p>快递查询</p>
								</div>
								<div class="weui-cell__ft"></div>
							</a>
							<a class="weui-cell weui-cell_access" href="javascript:;">
								<div class="weui-cell__hd"><img src="img/icon_integral.png"></div>
								<div class="weui-cell__bd">
									<p>我的钱包</p>
								</div>
								<div class="weui-cell__ft"></div>
							</a>
							<a class="weui-cell weui-cell_access" href="javascript:;">
								<div class="weui-cell__hd"><img src="img/icon_brand_weibo.png"></div>
								<div class="weui-cell__bd">
									<p>分享微博</p>
								</div>
								<div class="weui-cell__ft"></div>
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="weui-tabbar">
				<a href="index.html" class="weui-tabbar__item ">
					<div class="weui-tabbar__icon">
						<img src="img/buy.png" alt="">
					</div>
					<p class="weui-tabbar__label">首页</p>
				</a>
				<a href="fenlei.html" class="weui-tabbar__item">
					<div class="weui-tabbar__icon">
						<img src="img/buy.png" alt="">
					</div>
					<p class="weui-tabbar__label">分类</p>
				</a>
				<a href="gouwu.html" class="weui-tabbar__item">
					<div class="weui-tabbar__icon">
						<img src="img/buy.png" alt="">
					</div>
					<p class="weui-tabbar__label">购物车</p>
				</a>
				<a href="wode.html" class="weui-tabbar__item weui-bar__item--on">
					<div class="weui-tabbar__icon">
						<img src="img/buy.png" alt="">
					</div>
					<p class="weui-tabbar__label">我的良品</p>
				</a>
			</div>
		</div>
		<script src="lib/jquery-2.1.4.js"></script>
		<script src="lib/fastclick.js"></script>
		<script src="js/jquery-weui.js"></script>
	</body>

</html>